<script setup lang="ts">
import {list} from '@/api/first-page-shuffling-img.ts'
import {listProduction} from '@/api/production.ts'
import {onMounted, ref} from "vue";
import {useCounterStore} from "@/stores/counter.ts";
import {addpv} from '@/api/pv.ts'
const counter = useCounterStore()
const router=counter.router
const baseUrl=import.meta.env.VITE_API_URL;
onMounted(()=>{
  getShufflings();
  getProductions()
  counter.scrollToTop()
})
const productions=ref([])
const getProductions=()=>{
  listProduction({}).then(res=>{
    productions.value=res.data
  })
}
const shufflings=ref([])
const getShufflings=()=>{
  list({}).then(res=>{
    shufflings.value = res.data
  })
}
const gotoProductInfo=(id)=>{
  router.push(`/productioninfo/${id}`)
  addpv({productionId:id}).then(res=>{

  })
}
</script>

<template>
  <div class="main-container">
    <el-carousel class="el-carousel__item" interval="10000" indicator-position="none">
      <el-carousel-item v-for="item in shufflings" :key="item">
        <h3 class="small">
          <img   v-img-lazy="baseUrl+item.img">
          <div class="shuffingtext">
            <span>{{item.textIntroduction}}</span>
            <span class="spansmall">
              {{item.textIntroductionSmall}}
            </span>
          </div>
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div class="introduce-desc">
      <span>我们是一家基于软件开发的团队，产品包括web端网站后台、前台、小程序。是一家根据客户需求实现功能的生产者。我们致力于为客户提供方面、便捷的产品，应用于生活领域。</span>
    </div>
    <div style="display: flex;justify-content: center">
      <div class="masonry">
        <div class="item"  style="position:relative;" v-for="(item,index) in productions">
          <img v-img-lazy="baseUrl+item.cover" @click="gotoProductInfo(item.id)" alt="Image 1">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.spansmall{
  font-size: 20px;
  //margin-top: 10px;
  color: #82aa82;
  font-weight: 500;
}
.shuffingtext{
  display: flex;align-items: center;flex-direction: column;
}
.masonry {
  width: 70%;
  column-count: 3; /* 控制列数 */
  column-gap: 5px; /* 列之间的间距 */
}

.masonry .item {
  break-inside: avoid; /* 防止内容断裂 */
  margin-bottom: 0px; /* 项目之间的间距 */
}
.masonry .item img{
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 5px;
  transition:
      opacity 0.3s ease,
      transform 0.3s ease;
}
.masonry .item img:hover{
  opacity: 0.75;
  transform: scale(1.05);
}
.introduce-desc{
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}
.el-carousel__item {
  height: 100vh;
}
.el-carousel__item h3 {
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;

}
.el-carousel__item h3 div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  //font: italic bold 40px '新宋体';
  color: #a1a111;
  font-weight: bolder;
  //text-shadow: 2px 2px 4px #000000; /* 水平偏移2px，垂直偏移2px，模糊半径4px，颜色为黑色 */
}

.small {
  width: 100%;
  height: 100%;
}
.small img{
  width: 100%;
  height: 100%;
  object-fit: fill;
}
::v-deep(.el-carousel__arrow){
  font-size: 30px !important;
  width: 50px;
  height: 50px;
  border: 2px solid white;
  transition: background-color 0.6s ease, color 0.6s ease;
}
::v-deep(.el-carousel__arrow:hover){
  border-color: #003300;
  color:  #003300;
}
@media (max-width: 540px) {
  .masonry{
    width: 100%;
    padding: 5px;
  }
  .el-carousel__item h3 div{
    font-size: 16px;
  }
  .spansmall{
    font-size: 14px;
  }
}
</style>